<template>
    <div>
        <div class="flex flex-col transition-all">
            <div class="group flex flex-row items-center gap-3 transition-all hover:cursor-pointer hover:text-blue">
                <p class="cms-text-md font-figtree antialiased font-medium !m-0 hidden md:block">
                    Products</p>
                <p class="cms-text-xl font-figtree antialiased font-medium !m-0 visible md:hidden">
                    Products</p><!----><svg width="12" height="12" viewBox="0 0 12 12" fill="#1C1B1F"
                    xmlns="http://www.w3.org/2000/svg" class="transition-all">
                    <path d="M1 5L6 9L11 5"></path>
                </svg>
            </div>
            <div data-state="closed">
                <div class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
                    id="radix-vue-collapsible-content-v-0-0-0-0-0-6" data-state="closed" hidden=""
                    style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;">
                    <!---->
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="flex flex-col transition-all">
            <div class="group flex flex-row items-center gap-3 transition-all hover:cursor-pointer hover:text-blue">
                <p class="cms-text-md font-figtree antialiased font-medium !m-0 hidden md:block">About
                </p>
                <p class="cms-text-xl font-figtree antialiased font-medium !m-0 visible md:hidden">About
                </p><!----><svg width="12" height="12" viewBox="0 0 12 12" fill="#1C1B1F"
                    xmlns="http://www.w3.org/2000/svg" class="transition-all">
                    <path d="M1 5L6 9L11 5"></path>
                </svg>
            </div>
            <div data-state="closed">
                <div class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
                    id="radix-vue-collapsible-content-v-0-0-0-0-0-7" data-state="closed" hidden=""
                    style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;">
                    <!---->
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="flex flex-col transition-all">
            <div class="group flex flex-row items-center gap-3 transition-all hover:cursor-pointer hover:text-blue">
                <p class="cms-text-md font-figtree antialiased font-medium !m-0 hidden md:block">Partner
                    With Us</p>
                <p class="cms-text-xl font-figtree antialiased font-medium !m-0 visible md:hidden">
                    Partner With Us</p><!----><svg width="12" height="12" viewBox="0 0 12 12" fill="#1C1B1F"
                    xmlns="http://www.w3.org/2000/svg" class="transition-all">
                    <path d="M1 5L6 9L11 5"></path>
                </svg>
            </div>
            <div data-state="closed">
                <div class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
                    id="radix-vue-collapsible-content-v-0-0-0-0-0-8" data-state="closed" hidden=""
                    style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;">
                    <!---->
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const { data } = await useFetch('/api/test')
const mobileMenuShow = ref(false)
const handlCick = () => {
    mobileMenuShow.value = !mobileMenuShow.value
}
watch(() => mobileMenuShow.value, (val) => {
    if (val) {
        document.body.style.overflow = 'hidden'
    } else {
        document.body.style.overflow = 'auto'
    }
})
</script>


<style scoped lang="scss">
.head {
    padding-top: 16px;
    padding-bottom: 16px;
}

// 媒体查询pc短
@media (min-width: 768px) {
    .head {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}
</style>